// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
const staticOption = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  xAxis: {
    type: 'category',
    data: ['', '', ''],
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 18
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 18
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  label: {
    show: true,
    // 标签的文字。
    formatter: function (param) {
      return param['name']
    }
  },
  series: [
    {
      type: 'sankey',
      layout: 'none',
      left: '80px',
      right: '140px',
      top: '18%',
      bottom: '18%',
      itemStyle: {
        borderWidth: 0
      },
      data: [
        {
          name: '本区幼儿园',
          value: 110,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区幼儿园(流出)',
          value: 10,
          itemStyle: {
            color: '#8b0000',
            opacity: 0.8
          }
        },
        {
          name: '本区小学(流入)',
          value: 20,
          itemStyle: {
            color: '#00ab47',
            opacity: 0.8
          }
        },
        {
          name: '本区小学',
          value: 120,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区小学(流出)',
          value: 30,
          itemStyle: {
            color: '#8b0000',
            opacity: 0.8
          }
        },
        {
          name: '本区初中',
          value: 115,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区初中(流入)',
          value: 25,
          itemStyle: {
            color: '#00ab47',
            opacity: 0.8
          }
        },
        {
          name: '本区初中(流出)',
          value: 20,
          itemStyle: {
            color: '#8b0000',
            opacity: 0.8
          }
        },
        {
          name: '本区高中',
          value: 145,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区高中(流入)',
          value: 50,
          itemStyle: {
            color: '#00ab47',
            opacity: 0.8
          }
        },
        // 以下为作为虚拟填充
        {
          name: '本区幼儿园(流出)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区幼儿园(流出)2',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区初中(流入)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区高中(流入)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区高中(流入)2',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区小学(流出)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        }
      ],
      lineStyle: {
        color: 'source',
        opacity: 0.4
      },
      emphasis: {
        lineStyle: {
          opacity: 0.6
        }
      },
      links: [
        {
          source: '本区幼儿园',
          target: '本区幼儿园(流出)',
          value: 10,
          lineStyle: {
            color: 'target'
          }
        },
        {
          source: '本区幼儿园',
          target: '本区小学',
          value: 100
        },
        {
          source: '本区小学(流入)',
          target: '本区小学',
          value: 20
        },
        {
          source: '本区小学',
          target: '本区初中',
          value: 90
        },
        {
          source: '本区小学',
          target: '本区小学(流出)',
          value: 30,
          lineStyle: {
            color: 'target'
          }
        },
        {
          source: '本区初中(流入)',
          target: '本区初中',
          value: 25
        },
        {
          source: '本区初中',
          target: '本区高中',
          value: 95
        },
        {
          source: '本区初中',
          target: '本区初中(流出)',
          value: 20,
          lineStyle: {
            color: 'target'
          }
        },
        {
          source: '本区高中(流入)',
          target: '本区高中',
          value: 50
        },
        // 以下是填充关系
        {
          source: '本区幼儿园(流出)',
          target: '本区幼儿园(流出)1',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区幼儿园(流出)1',
          target: '本区幼儿园(流出)2',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区初中(流入)1',
          target: '本区初中(流入)',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区高中(流入)1',
          target: '本区高中(流入)2',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区高中(流入)2',
          target: '本区高中(流入)',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区小学(流出)',
          target: '本区小学(流出)1',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        }
      ],
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 18
        }
      }
    }
  ]
}

const staticOptionMid = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  xAxis: {
    type: 'category',
    data: ['', '', ''],
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 18
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#bbb',
        fontSize: 18
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(26, 124, 230, .2)'
      }
    }
  },
  label: {
    show: true,
    // 标签的文字。
    formatter: function (param) {
      return param['name']
    }
  },
  series: [
    {
      type: 'sankey',
      layout: 'none',
      left: '80px',
      right: '140px',
      top: '18%',
      bottom: '18%',
      itemStyle: {
        borderWidth: 0
      },
      data: [
        {
          name: '本区幼儿园',
          value: 110,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区幼儿园(流出)',
          value: 10,
          itemStyle: {
            color: '#8b0000',
            opacity: 0.8
          }
        },
        {
          name: '本区小学(流入)',
          value: 20,
          itemStyle: {
            color: '#00ab47',
            opacity: 0.8
          }
        },
        {
          name: '本区小学',
          value: 120,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区小学(流出)',
          value: 30,
          itemStyle: {
            color: '#8b0000',
            opacity: 0.8
          }
        },
        {
          name: '本区初中',
          value: 115,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区初中(流入)',
          value: 25,
          itemStyle: {
            color: '#00ab47',
            opacity: 0.8
          }
        },
        {
          name: '本区初中(流出)',
          value: 20,
          itemStyle: {
            color: '#8b0000',
            opacity: 0.8
          }
        },
        {
          name: '本区高中',
          value: 145,
          itemStyle: {
            color: '#0066ff'
          }
        },
        {
          name: '本区高中(流入)',
          value: 50,
          itemStyle: {
            color: '#00ab47',
            opacity: 0.8
          }
        },
        // 以下为作为虚拟填充
        {
          name: '本区幼儿园(流出)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区幼儿园(流出)2',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区初中(流入)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区高中(流入)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区高中(流入)2',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        },
        {
          name: '本区小学(流出)1',
          itemStyle: {
            color: '#0066ff',
            opacity: 0
          }
        }
      ],
      lineStyle: {
        color: 'source',
        opacity: 0.4
      },
      emphasis: {
        lineStyle: {
          opacity: 0.6
        }
      },
      links: [
        {
          source: '本区幼儿园',
          target: '本区幼儿园(流出)',
          value: 10,
          lineStyle: {
            color: 'target'
          }
        },
        {
          source: '本区幼儿园',
          target: '本区小学',
          value: 100
        },
        {
          source: '本区小学(流入)',
          target: '本区小学',
          value: 20
        },
        {
          source: '本区小学',
          target: '本区初中',
          value: 90
        },
        {
          source: '本区小学',
          target: '本区小学(流出)',
          value: 30,
          lineStyle: {
            color: 'target'
          }
        },
        {
          source: '本区初中(流入)',
          target: '本区初中',
          value: 25
        },
        {
          source: '本区初中',
          target: '本区高中',
          value: 95
        },
        {
          source: '本区初中',
          target: '本区初中(流出)',
          value: 20,
          lineStyle: {
            color: 'target'
          }
        },
        {
          source: '本区高中(流入)',
          target: '本区高中',
          value: 50
        },
        // 以下是填充关系
        {
          source: '本区幼儿园(流出)',
          target: '本区幼儿园(流出)1',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区幼儿园(流出)1',
          target: '本区幼儿园(流出)2',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区初中(流入)1',
          target: '本区初中(流入)',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区高中(流入)1',
          target: '本区高中(流入)2',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区高中(流入)2',
          target: '本区高中(流入)',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        },
        {
          source: '本区小学(流出)',
          target: '本区小学(流出)1',
          value: 0,
          lineStyle: {
            color: 'transparent'
          }
        }
      ],
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 18
        }
      }
    }
  ]
}

// 备选颜色，有需求则进行循环
// const colors = ['#0066ff', '#f16f3c', '#00ab47', '#df0050', '#394cff', '#702af2', '#8b0000', '#828e00', '#3700c4', '#730054']
// let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    // this.clear()
    // 装配数据 必须使用箭头函数
    // additionalOptions.sources.forEach((p1) => {
    //   this.option.series[0].data.push({
    //     name: p1,
    //     itemStyle: {
    //       color: colors[colorIndex],
    //       opacity: 0.8
    //     }
    //   })
    //   colorIndex += 1
    //   if (colorIndex > colors.length) {
    //     colorIndex = 0
    //   }
    // })
    // additionalOptions.links.forEach((p1) => {
    //   this.option.series[0].links.push(p1)
    // })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
    this.option.series[0].links = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
